<div class="page-title">
  <div class="row">
    <div class="col-xs-9">
      <h1>Clusters<span *ngIf="shownClusterId"> / {{ shownClusterId }}</span></h1>
    </div>
    <div class="col-xs-3 main-button">
      <button
        type="button"
        class="btn btn-primary"
        (click)="editCluster()"
        [shownFor]="'create_cluster'"
      >
        Create New Cluster
      </button>
    </div>
  </div>
</div>

<filter
  *ngIf="!shownClusterId"
  (onChange)="fetchData()"
>
  <search criterion [target]="'name'"></search>
</filter>

<pager
  [pagingData]="pagedData"
  [isHidden]="!!shownClusterId"
  (onChange)="fetchData($event)"
></pager>

<div class="clusters row" *ngIf="getClusters().length">
  <div class="col-xs-12">

    <div class="table-help">
      <div class="col-xs-10">Cluster Name</div>
      <div class="col-xs-2">Servers</div>
    </div>

    <div
      class="box"
      *ngFor="let cluster of getClusters()|id:shownClusterId"
      [ngClass]="{open: isCurrent(cluster)}"
    >
      <div class="col-xs-10 name">
        {{cluster.data.name}}
        <a
          (click)="editCluster(cluster)"
          [shownFor]="'edit_cluster'"
        >
          <span class="glyphicon edit-icon"></span>
        </a>
      </div>
      <div class="col-xs-1 name">{{getSize(cluster)}}</div>
      <div class="col-xs-1 action">
        <a [routerLink]="['/clusters']" [fragment]="isCurrent(cluster) ? '' : cluster.id">
          <span
            class="glyphicon"
            [ngClass]="'glyphicon-triangle-' + (isCurrent(cluster) ? 'bottom' : 'right')"
          ></span>
        </a>
      </div>

      <div class="bowels" *ngIf="isCurrent(cluster)">
        <div class="col-xs-10">
          <h3>Cluster Configuration Details</h3>
        </div>
        <div class="col-xs-2">
          <button
            class="btn btn-danger"
            *ngIf="!getSize(cluster)"
            (confirmedClick)="delete(cluster)"
            [confirmation]="'Delete cluster ' + cluster.data.name + '?'"
          >
            Delete Cluster
          </button>
        </div>

        <div
          class="col-xs-6 server-details"
          *ngFor="let details of getKeyHalfsets(cluster)">
          <div
            class="server-details-item row scrollable"
            *ngFor="let detail of details"
          >
            <div class="col-xs-4 name" [title]="detail">{{detail|deparametrize}}</div>
            <div class="col-xs-8 parameter">
              <longdata [key]="cluster.id + '_' + detail" [data]="cluster.data.configuration[detail]">
                <ul>
                  <li *ngFor="let server of cluster.data.configuration[detail]">
                    <a [routerLink]="['/servers']" [fragment]="server.server_id">
                      {{ server.server_name }}
                    </a>
                    (fqdn: {{ server.fqdn }}, ip: {{ server.ip }})
                  </li>
                </ul>
              </longdata>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<pager
  [pagingData]="pagedData"
  [isHidden]="!!shownClusterId"
  (onChange)="fetchData($event)"
></pager>

<loader *ngIf="!clusters"></loader>

<div *ngIf="!getClusters().length" class="no-clusters">
  You don't have any clusters yet. Please create.
</div>

<modal
  [title]="model.id ? 'Edit Cluster' : 'Create New Cluster'"
>
  <wizard
    [steps]="clusterSteps"
    (saveHandler)="save($event)"
  ></wizard>
</modal>
